/* eslint-disable react/jsx-no-comment-textnodes */
/* eslint-disable react/jsx-pascal-case */
import React from 'react';
import Tabbar from './tabbar'
import { ShopO } from '@react-vant/icons'
import { NavLink } from 'react-router-dom';
const Home = () => {

    const [hotlist, setHotlist] = React.useState([])

    const [productlist, setProductlist] = React.useState([]);

    const [recommendlist, setRecommendlist] = React.useState([]);

    React.useEffect(() => {
        const index = async () => {
            var result = await React.$api.home()
            if (result && result.code === 1) {
                setHotlist(result.data.hotlist)
                setProductlist(result.data.productlist)
                setRecommendlist(result.data.recommendlist)
            }
        }

        index()
    }, [])


    return (
        <>
            {/* 轮播 */}
            <div className="banner_shouy">
                <React.$Vant.Swiper>
                    {hotlist.map((item) => (
                        <React.$Vant.Swiper.Item key={item.id} autoplay={5000}>
                            <React.$Vant.Image src={item.image_text} />
                        </React.$Vant.Swiper.Item>
                    ))}
                </React.$Vant.Swiper>
            </div>

            {/*快捷导航*/}
            <div className="shouye_kuanj">
                <React.$Vant.Grid border={false}>
                    <React.$Vant.Grid.Item>
                        <div className="swiper-slide">
                            <React.$router.NavLink to="/business/lease/add">
                                <img src="/assets/images/kj.png" alt="" /> <p>产品租赁</p>
                            </React.$router.NavLink></div>
                    </React.$Vant.Grid.Item>
                    <React.$Vant.Grid.Item>
                        <div className="swiper-slide"><a href="hsb.html"><img src="/assets/images/kj1.png" alt="" /> <p>我要归还</p></a></div>
                    </React.$Vant.Grid.Item>
                    <React.$Vant.Grid.Item>
                        <div className="swiper-slide">
                            <React.$router.NavLink to="/business/product/index"><img src="/assets/images/kj2.png" alt="" /> <p>商品大全</p>
                            </React.$router.NavLink></div>
                    </React.$Vant.Grid.Item>
                    <React.$Vant.Grid.Item>
                        <div className="swiper-slide">
                            <React.$router.NavLink to="/business/base/about"><img src="/assets/images/kj3.png" alt="" />
                                <p>关于我们</p>
                            </React.$router.NavLink>
                        </div>
                    </React.$Vant.Grid.Item>
                </React.$Vant.Grid>
            </div>


            <div className="chan_p_center">
                <div className="shouye_biaot_k">
                    <a href="list.html">
                        <h2>产品中心</h2>
                        <p>Product Center</p>
                        <img src="/assets/images/jiant.png" alt="" />
                    </a>
                </div>

                <div className="chanp_k_sy">
                    <div className="sjpiue_chanp_list">
                        {/* 产品轮播图 */}
                        <React.$Vant.Swiper>
                            {productlist.map((item) => (
                                <React.$Vant.Swiper.Item key={item.id} autoplay={5000}>
                                    <div className="swiper-slide">
                                        <React.$router.NavLink to={`/business/product/info?pid=${item.id}`} className="a_blok">
                                            <img src={item.thumbs_text} alt="" /> <span>查看详情</span>
                                        </React.$router.NavLink>
                                    </div>
                                </React.$Vant.Swiper.Item>
                            ))}
                        </React.$Vant.Swiper>
                    </div>
                </div>
                <div className="lest_zx">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="/assets/images/fangh.jpg" alt="" />
                                <p>在线咨询</p>
                            </a>
                        </li>
                        <li>
                            <a href="zn.html">
                                <img src="/assets/images/fangh1.jpg" alt="" />
                                <p>使用指南</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div className="shouye_biaot_k">
                    <a href="anli.html">
                        <h2>经典案例</h2>
                        <p>Classic case</p>
                        <img src="/assets/images/jiant.png" alt="" />
                    </a>
                </div>

                <div className="list_color" >
                    <ul>
                        {
                            recommendlist.map((item) => {
                                return (
                                    <li key={item.id}>
                                        <React.$router.NavLink to={`/business/category/info?pid=${item.id}`}>
                                            <img src={item.image_text} alt="" />
                                            <div className="right">
                                                <p>{item.name}</p>
                                                <span>{item.createtime}</span>
                                            </div>
                                        </React.$router.NavLink>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>


            <div style={{ height: '.75rem' }}></div>
            <Tabbar />
        </>
    )
}

export default Home;